<template>
    <page class="movie">
        <page-header>猫眼电影</page-header>
        <ul class="topNav">
            <li :class="[pageType==0?'active':null]" @click="pageType=0">正在热映</li>
            <li :class="[pageType==1?'active':null]" @click="pageType=1">即将上映</li>
        </ul>
        <div class="bottomBar">
            <div class="bottomBar-switch" :class="{active:pageType==1}"></div>
        </div>
        <swiper ref="mySwiper" class="movieSwiper" :options="swiperOption">
            <!--正在热映 -->
            <swiper-slide class="swiperSlide">
                <b-scroll>
                    <movie-item @showImage="showMvoieListImage" v-for="(item,index) in movieList" :key="index" :mitem="item"></movie-item>
                </b-scroll>
            </swiper-slide>
            <!--将即上映 -->
            <swiper-slide class="swiperSlide">
                <b-scroll>
                    <div class="hope" @touchstart.stop="" style="overflow:auto">
                        <div class="title">近期受期待</div>
                        <div class="list" :style="{width:listWidth}">
                            <div class="l-item" v-for="(item,index) in hopeList" :key="index">
                                <img v-lazy="item.img.replace('w.h','128.180')" alt="">
                                <span class="mn">{{item.nm}}</span>
                                <span class="mt">{{item.comingTitle}}</span>
                            </div>
                        </div>
                    </div>
                    <movie-item  @showImage="showComingImageList" v-for="(item,index) in comingList" :key="index" :mitem="item">
                        <template slot="title">{{item.comingTitle}}</template>
                    </movie-item>
                </b-scroll>
            </swiper-slide>
        </swiper>
    </page>
</template>

<script>
import movieItem from "../components/movieItem"
import BScroll from "../components/BScroll";
    export default {
        name: "movie",
        data() {
            return {
                //0代表正在热映
                //1代表即将上映
                pageType: 0,
                movieList:[],    //正在热映
				movieListImage:[],//代表正在热映的所有图片
                comingList:[],    //即将上映
				comingListImage:[], //即将上映的所有图片
                hopeList:[] ,      //近期受期待
                listWidth:"100%"
            }
        },
        created(){
            this.getMovieList();
            this.getComingList();
            this.getHopeList();
        },
        watch: {
            pageType(newValue) {
                //newValue代表的是就pageType新的值
                this.mySwiper.slideTo(newValue);
            },
            //手动去计算它的宽度
            hopeList(newValue){
                this.listWidth=newValue.length*1.9+"rem";
            }
        },
        computed: {
            //swiper的配置项
            //https://www.swiper.com.cn/api/index.html
            swiperOption() {
                var that = this; //这个this指向的是vue
                return {
                    initialSlide: 0,
                    //监控事件
                    on: {
                        slideChange() {
                            that.pageType = this.activeIndex;
                        }
                    }
                }
            },
            mySwiper() {
                //返回了页面上面的swiper DOM元素
                return this.$refs.mySwiper.swiper;
            }
        },
        methods: {
            //通过vuex里面的mapActions可以拿到vuex的store里面的showActionSheet
            //...mapActions(["showActionSheet"]),因为已经扩展到vue原型上面去了，所以不用重来获取
			freshData(scroll) {
                console.log("我在外部监听你的下拉刷新方法 ");
                setTimeout(() => {
                    scroll.finishPullDown();
                    scroll.refresh();
                }, 5000);
            },
            //获取正在热映
            getMovieList(){
                this.showLoading("正在加载中");
                this.$http.get("/maoyanApi/ajax/movieOnInfoList").then(res=>{
                    let movieList=res.data.movieList;
                    this.movieList=movieList;
					//得到所有正在热映的图片
					this.movieListImage=movieList.map(item=>{
						//修正图片地址及格式
						item.img=item.img.replace("w.h","128.180");
						//准备预览图
						var imgWidth=document.documentElement.clientWidth;
						var imgHeight=parseInt(imgWidth/128*180);
						item.p_img=item.img.replace("128.180",`${imgWidth}.${imgHeight}`);
						return item.p_img;
					});
                    this.hideLoading();
                }).catch(err=>{
                    console.log(err);
                    this.hideLoading();
                });
            },
            //获取即将上映
            getComingList(){
                this.showLoading("正在加载中");
                this.$http.get("/maoyanApi/ajax/comingList?ci=57&token=&limit=10").then(res=>{
                    this.comingList=res.data.coming;
					this.comingListImage=this.comingList.map(item=>{
						//修正图片地址及格式
						item.img=item.img.replace("w.h","128.180");
						//准备预览图
						var imgWidth=document.documentElement.clientWidth;
						var imgHeight=parseInt(imgWidth/128*180);
						item.p_img=item.img.replace("128.180",`${imgWidth}.${imgHeight}`);
						return item.p_img;
					})
                    this.hideLoading();
                }).catch(err=>{
                    console.log(err);
                    this.hideLoading();
                });
            },
            getHopeList(){
                this.showLoading();
                this.$http.get("/maoyanApi/ajax/mostExpected?ci=57&limit=10&offset=0&token=").then(res=>{
                    this.hopeList=res.data.coming;
                    this.hideLoading()
                }).catch(err=>{
                    this.hideLoading()
                });
            },
			//预览正在热映的电影图片
			showMvoieListImage(img){
				this.showPreviewImage({
					urls:this.movieListImage,
					//代表当前要预览那一张
					current:img.replace("128.180","128.180")
				});
			},
			showComingImageList(p_img){
				this.showPreviewImage({
					urls:this.comingListImage,
					//代表当前要预览那一张
					current:p_img
				});
			}
        },
        components:{
            movieItem,BScroll
        },
    }
</script>

<style lang="scss" scoped>
    @import "../assets/css/comm.scss";
    .movie{
        display: flex;
        flex-direction: column;
    }
    .topNav {
        @include flexbox();
        height: .8rem;

        >li {
            flex: 1;
            height: inherit;
            @include flexbox();
            justify-content: center;
            align-items: center;

            &.active {
                color: $primaryColor;
            }
        }
    }

    .bottomBar {
        width: 100%;
        height: 2px;
        background-color: lightgray;

        .bottomBar-switch {
            width: 50%;
            background-color: $primaryColor;
            height: inherit;
            transition: all 0.2s linear;

            &.active {
                transform: translateX(100%);
            }

        }
    }

    .movieSwiper {
        flex: 1;
        width: 100%;
        overflow: auto;
    }
    .swiperSlide{
        height:100%;
        overflow: auto;
    }
    .hope{
        box-sizing: border-box;
        padding: .1rem;
        .list{
            min-width:100%;
            @include flexbox();
            .l-item{
                @include flexbox(column);
                margin-left:.1rem;
                margin-right:.1rem;
                overflow: hidden;
                width:1.7rem;
                img{
                    width:1.7rem;
                    height:2.3rem;
                    display: block;
                }
                .mn{
                    font-size: .28rem;
                    text-overflow: hidden;
                    overflow: hidden;
                    white-space: nowrap;
                }
                .mt{
                    font-size:.24rem;
                    color:#999;
                }
            }
        }
    }
</style>